<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {% block title %}

    {% endblock %}

    {% load static %}
    <link rel="stylesheet" href='{% static 'css/style.css' %}'>
    {% block style %}

    {% endblock %}

</head>
<body>
<div class="login-container">
    <h1>ShareLink</h1>
    <div class="connect">
        <p>Link the world. Share to world.</p>
    </div>
    {% block form %}

    {% endblock %}
</div>

    <script src="{% static  'jss/jquery.min.js' %}"></script>
    <script src='{% static 'jss/common.js' %}'></script>
    <script src='{% static 'jss/supersized.3.2.7.min.js' %}'></script>
    <script>
        jQuery(function ($) {
            $.supersized({
                slide_interval: 4000,
                transition: 1,
                transition_speed: 1000,
                performance: 1,
                min_width: 0,
                min_height: 0,
                vertical_center: 1,
                horizontal_center: 1,
                fit_always: 0,
                fit_portrait: 1,
                fit_landscape: 0,
                slide_links: 'blank',
                slides: [{image: '{% static 'img/1.jpg' %}'}, {image: '{% static 'img/2.jpg' %}'}, {image: '{% static '/img/3.jpg' %}'}, {image: '{% static '/img/6.jpg' %}'}, {image: '{% static '/img/7.jpg' %}'}, {image: '{% static '/img/4.jpg' %}'}, {image: '{% static '/img/5.jpg' %}'}]
            });
        });
    </script>

    <script src='{% static 'jss/jquery.validate.min.js' %}'></script>

</body>
</html>